<template>
  <f-picker
    class="area-picker"
    v-bind="$attrs"
    :show-flag="showFlag"
    :data-list="dataList"
    :default-props="defaultProps"
    v-model="result"
    @change="handleChange"
    @submit="handleSubmit"
    @update:showFlag="hidePopup">
  </f-picker>
</template>

<script>

import Vue from 'vue';
import FScrollBox from '../scroll/scroll-box';
import FScrollList from '../scroll/scroll-list';

export default {
  name: 'f-area-picker',
  components: {FScrollList, FScrollBox},
  props: {
    provinceList: {
      type: Array,
      default: () => {
        let {areaConfig = {}} = Vue.prototype.$fly;
        let {provinceList = []} = areaConfig;
        return provinceList;
      }
    },
    cityList: {
      type: Array,
      default: () => {
        let {areaConfig = {}} = Vue.prototype.$fly;
        let {cityList = []} = areaConfig;
        return cityList;
      }
    },
    areaList: {
      type: Array,
      default: () => {
        let {areaConfig = {}} = Vue.prototype.$fly;
        let {areaList = []} = areaConfig;
        return areaList;
      }
    },
    townList: {
      type: Array,
      default: () => {
        let {areaConfig = {}} = Vue.prototype.$fly;
        let {townList = []} = areaConfig;
        return townList;
      }
    },
    showFlag: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => ([])
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {value: 'value', text: 'text', parentId: 'parentId'};
      }
    },
    requireArea: {
      type: Boolean,
      default: true
    },
    requireTown: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      result: [],
      initFlag: false,
      typeList: ['province', 'city', 'area', 'town']
    };
  },
  watch: {
    showFlag() {
      this.init();
    }
  },
  computed: {
    provinceFilterList() {
      return this.provinceList;
    },
    cityFilterList() {
      return this.getFilterList('city', this.result[0] || this.provinceList[0]);
    },
    areaFilterList() {
      return this.getFilterList('area', this.result[1] || this.cityFilterList[0]);
    },
    townFilterList() {
      return this.getFilterList('town', this.result[2] || this.areaFilterList[0]);
    },
    dataList() {
      let list = [this.provinceList, this.cityFilterList];
      if (this.requireArea) list.push(this.areaFilterList);
      if (this.requireTown) list.push(this.townFilterList);
      return list;
    }
  },
  methods: {
    handleChange({value, columnIndex}) {
      this.typeList.forEach((type, i) => {
        if (i === columnIndex) {
          this.result.splice(i, 1, value);
        } else if (i > columnIndex) {
          let list = this[type + 'FilterList'] || [];
          if (!list.find(v => v === this.result[i])) {
            let item = this[type + 'FilterList'][0];
            if (item) this.result.splice(i, 1, item);
          }
        }
      });
    },
    handleSubmit(list) {
      this.$emit('input', list.map(v => v[this.defaultProps.value]));
      this.$emit('submit', list);
      this.hidePopup();
    },
    hidePopup() {
      this.$emit('update:showFlag', false);
    },
    getFilterList(type, parent) {
      let {parentId, value} = this.defaultProps;
      return this[type + 'List'].filter(v => v[parentId] === parent[value]);
    },
    init() {
      if (this.showFlag) {
        this.value.forEach((v, i) => {
          let list = this[this.typeList[i] + 'FilterList'] || [];
          let item = list.find(l => l[this.defaultProps.value] === v);
          if (item) this.result.splice(i, 1, item);
        });
      }
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>

</style>
